<template>
  <div>
    <p class="title" style="padding-left: 10px">公式计算器：</p>
      <div class="area">
        <div class="box">
          <div style="margin: 10px 20px"  v-for="(temp,index) in tableData" :key="index">
            <!-- <p v-for="(item,ind) in list" :key="ind"> -->
              <!-- <el-checkbox :v-model="item.checked">{{item.COLM1}}</el-checkbox> -->
              <el-checkbox-group v-model="checkedVal" >
                <el-checkbox 
                v-for="item in tableData[0].TableD" 
                :label="item.COLM1" 
                :key="item.COLM1"
                style="display: block; margin: 15px 0"
                >
                {{item.COLM1}}
                </el-checkbox>
              </el-checkbox-group>
            <!-- </p> -->
          </div>
        </div>
        <el-button
            type="primary"
            style="font-size: 20px;margin:20px"
            @click="submitFn"
            >
            计算
          </el-button>
        <!-- 计算结果 -->
        <div style="margin-left: 20px">
          <span style="font-size: 20px">计算结果：</span>
          <span style="font-size: 20px; color: red">{{ result }}</span>
        </div>
      </div>
      <p class="title fontSize"><span class="gssm">公式说明</span></p>
      <div v-for="item in tableData" :key="item.BT" style="padding-left: 10px">
        <el-table
          :data="item.TableD"
          ref="multipleTable"
          tooltip-effect="dark"
          style="width: 100%"
          class="fontSize"
          border
          :header-cell-style="{ background: '#34adfc', color: '#fff' }">
          <template v-for='(col,index) in item.Tab'>
            <el-table-column
              :show-overflow-tooltip="true"
              :prop="col.dataItem"
              :label="col.dataName"
              :key="index">
            </el-table-column>
          </template>
        </el-table>
      </div>
  </div>
</template>

<script>
import { FormulaCalculationAPI } from "@/api/index.js";
export default {
  // props:['tableData'],
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    tableData: {
      type : Array,
      default: () => {[]}
    }

  },
  data(){
    return  {
      checkedVal: [],
      result:'',
    }
  },
  created () {
    // console.log(this.data);
  },
  methods:{
    async submitFn() {
      // 判断至少选中一条
      if (this.checkedVal.length < 1) {
        return this.$message({ duration: 1000, message: '请至少选中一项!', type: 'warning' });
      }
      // 准备提交参数
      let paramsList = []
      this.checkedVal.forEach(item => {
        paramsList.push({
          CSID: '0',
          CSBS: item,
          CSMC: item,
          Value: '1'
        })
      })
      // 发送请求
      try {
        const res = await FormulaCalculationAPI(
          { token: "2855ed6102590a02fd52ce00567ee9d4", gsbm: this.data.GSMS.GSBM },
          {
            gs: {
              GSBM: this.data.GSMS.GSBM,
              GSMC: this.data.GSMS.GSMC,
              JSGS: 'GSLX1',
            },
            listGSCS: paramsList,
          })
          this.result = res.data.result
      } catch (error){
        console.log(error);
      }

    }
  }
}
</script>

<style scoped>
.gssm{
  margin-left: 10px;
  font-size:20px;
}
/deep/ .el-checkbox__input {
  vertical-align: baseline;
}
</style>
